<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="七星彩一号表" name="first">

        <el-container class="box">
          <!-- 左边区域 -->
          <el-aside width="140px">筛选逻辑</el-aside>
          <el-container>
            <!-- 顶部区域 -->
            <el-header height="40px">
              <span>6.筛选逻辑</span>
              <div>
                <!-- <el-checkbox label="保留"></el-checkbox> -->
                <el-checkbox label="删除" @change="empty"></el-checkbox>
              </div>
            </el-header>
            <!-- 内容区域 -->
            <el-main height="550px">
              <div class="left">
               <div class="item" v-for="(itme,index) in left_unit" :key="index + 'left'">
                  <span>{{itme}}</span>
                 <input class="input" v-if="index == 0" type="text" v-model="a1_eq" />
                  <input class="input" v-if="index == 1" type="text" v-model="a2_eq" />
                  <input class="input" v-if="index == 2" type="text" v-model="a3_eq" />
                  <input class="input" v-if="index == 3" type="text" v-model="a4_eq" />
                  <input class="input" v-if="index == 4" type="text" v-model="a5_eq" />
                  <input class="input" v-if="index == 5" type="text" v-model="a6_eq" />
                  <input class="input" v-if="index == 6" type="text" v-model="a7_eq" />
                  <input class="input" v-if="index == 7"  type="text" v-model="m_eq" />
                </div>
               <div class="item" v-for="input in eqList" :key='input.id'>
                  <span>M{{input.id}}=</span>
                  <input class="input" type="text" v-model="input.model" @input="change(input.id,input.model)" />
                </div>

              </div>
              <div class="right">
              <div class="item" v-for="(itme,index2) in right_unit" :key="index2 + 'right'">
                  <input class="input" v-if="index2 == 0" type="text" v-model="a1_gt" />
                  <input class="input" v-if="index2 == 1" type="text" v-model="a2_gt" />
                  <input class="input" v-if="index2 == 2" type="text" v-model="a3_gt" />
                  <input class="input" v-if="index2 == 3" type="text" v-model="a4_gt" />
                  <input class="input" v-if="index2 == 4" type="text" v-model="a5_gt" />
                  <input class="input" v-if="index2 == 5" type="text" v-model="a6_gt" />
                  <input class="input" v-if="index2 == 6" type="text" v-model="a7_gt" />
                  <input class="input" v-if="index2 == 7" type="text" v-model="m_gt" />
                  <span>{{itme}}</span>
                  <input class="input" v-if="index2 == 0" type="text" v-model="a1_lt" />
                  <input class="input" v-if="index2 == 1" type="text" v-model="a2_lt" />
                  <input class="input" v-if="index2 == 2" type="text" v-model="a3_lt" />
                  <input class="input" v-if="index2 == 3" type="text" v-model="a4_lt" />
                  <input class="input" v-if="index2 == 4" type="text" v-model="a5_lt" />
                  <input class="input" v-if="index2 == 5" type="text" v-model="a6_lt" />
                  <input class="input" v-if="index2 == 6" type="text" v-model="a7_lt" />
                  <input class="input" v-if="index2 == 7" type="text" v-model="m_lt" />
                </div>
                <div class="item" v-for="input in ltList" :key='input.id'>
                  <input class="input" type="text" v-model="input.model" @input="change(input.id,input.model)"/>
                  <span>≤M{{input.id}}≤</span>
                  <input class="input" type="text" v-model="input.model2" @input="change(input.id,input.model2)"/>
                </div>
              </div>
            </el-main>
          </el-container>
        </el-container>


        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="goBack">上一步</el-button>
          <el-button type="primary" @click="goScreening">筛选</el-button>
          <el-button type="primary" @click="goScreening">下一步</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="七星彩二号表" name="second">


        <el-container class="box">
          <!-- 左边区域 -->
          <el-aside width="140px">筛选逻辑</el-aside>
          <el-container>
            <!-- 顶部区域 -->
            <el-header height="40px">
              <span>6.筛选逻辑</span>
              <div>
                <!-- <el-checkbox label="保留"></el-checkbox> -->
                <el-checkbox label="删除" @change="empty"></el-checkbox>
              </div>
            </el-header>
            <!-- 内容区域 -->
            <el-main height="550px">
            <div class="left">
               <div class="item" v-for="(itme,index3) in left_unit" :key="index3 + 'left'">
                 <span>{{itme}}</span>
                 <input class="input" v-if="index3 == 0" type="text" v-model="a1_eq" />
                 <input class="input" v-if="index3 == 1" type="text" v-model="a2_eq" />
                 <input class="input" v-if="index3 == 2" type="text" v-model="a3_eq" />
                 <input class="input" v-if="index3 == 3" type="text" v-model="a4_eq" />
                 <input class="input" v-if="index3 == 4" type="text" v-model="a5_eq" />
                 <input class="input" v-if="index3 == 5" type="text" v-model="a6_eq" />
                 <input class="input" v-if="index3 == 6" type="text" v-model="a7_eq" />
                 <input class="input" v-if="index3 == 7"  type="text" v-model="m_eq" />
               </div>
               <div class="item" v-for="input in eqList" :key='input.id'>
                 <span>M{{input.id}}=</span>
                 <input class="input" type="text" v-model="input.model" @input="change(input.id,input.model)" />
               </div>

             </div>
             <div class="right">
               <div class="item" v-for="(itme,index4) in right_unit" :key="index4 + 'right'">
                 <input class="input" v-if="index4 == 0" type="text" v-model="a1_gt" />
                 <input class="input" v-if="index4 == 1" type="text" v-model="a2_gt" />
                 <input class="input" v-if="index4 == 2" type="text" v-model="a3_gt" />
                 <input class="input" v-if="index4 == 3" type="text" v-model="a4_gt" />
                 <input class="input" v-if="index4 == 4" type="text" v-model="a5_gt" />
                 <input class="input" v-if="index4 == 5" type="text" v-model="a6_gt" />
                 <input class="input" v-if="index4 == 6" type="text" v-model="a7_gt" />
                 <input class="input" v-if="index4 == 7"  type="text" v-model="m_gt" />
                 <span>{{itme}}</span>
                 <input class="input" v-if="index4 == 0" type="text" v-model="a1_lt" />
                 <input class="input" v-if="index4 == 1" type="text" v-model="a2_lt" />
                 <input class="input" v-if="index4 == 2" type="text" v-model="a3_lt" />
                 <input class="input" v-if="index4 == 3" type="text" v-model="a4_lt" />
                 <input class="input" v-if="index4 == 4" type="text" v-model="a5_lt" />
                 <input class="input" v-if="index4 == 5" type="text" v-model="a6_lt" />
                 <input class="input" v-if="index4 == 6" type="text" v-model="a7_lt" />
                 <input class="input" v-if="index4 == 7" type="text" v-model="m_lt" />
               </div>
               <div class="item" v-for="input in ltList" :key='input.id'>
                 <input class="input" type="text" v-model="input.model" @input="change(input.id,input.model)"/>
                 <span>≤M{{input.id}}≤</span>
                 <input class="input" type="text" v-model="input.model2" @input="change(input.id,input.model2)"/>
               </div>
             </div>
            </el-main>
          </el-container>
        </el-container>


        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="goBack">上一步</el-button>
          <el-button type="primary" @click="goScreening">筛选</el-button>
          <el-button type="primary" @click="goScreening">下一步</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  export default {
    name: 'rankSevenScreening',
    data() {
      return {
        activeName: 'first',
        left_unit: ['个位=', '十位=', '百位=', '千位=', '万位=', '十万位=', '百万位=','M='],
        right_unit: ['≤个位≤', '≤十位≤', '≤百位≤', '≤千位≤', '≤万位≤', '≤十万位≤', '≤百万位≤','≤M≤'],
        filter: {}, // 筛选条件数据
        dataList: [], //表格公式数据
        dataInfo: {},
        list: [], // 分析结果数据
        a1_eq: '',
        a2_eq: '',
        a3_eq: '',
        a4_eq: '',
        a5_eq: '',
        a6_eq: '',
        a7_eq: '',
        m_eq: '',
        a1_lt: '',
        a2_lt: '',
        a3_lt: '',
        a4_lt: '',
        a5_lt: '',
        a6_lt: '',
        a7_lt: '',
        m_lt: '',
        a1_gt: '',
        a2_gt: '',
        a3_gt: '',
        a4_gt: '',
        a5_gt: '',
        a6_gt: '',
        a7_gt: '',
        m_gt: '',
        eqList: [],
        ltList: [],
        resData: [],
      };
    },

    created() {
      var activeName = this.$route.query.activeName;
      this.activeName = activeName;
      this.loadData();

      this.addEQList();
      this.addLtList();

    },

    methods: {
      handleClick(tab, event) {
        this.activeName = tab.name;
        this.loadData();
      },

      loadData() {
        if (this.activeName == 'first') {
          var dataJson = window.localStorage.getItem("formulaSevenList");
          if (dataJson) {
            var data = JSON.parse(dataJson);
            this.dataList = eval( data.data);
          }

        } else {
          var dataJson = window.localStorage.getItem("formulaSevenList2");
         if (dataJson) {
           var data = JSON.parse(dataJson);
           this.dataList = eval( data.data);
         }
        }
      },

      // 清空输入内容
      empty() {
        this.a1_eq = "";
        this.a2_eq = "";
        this.a3_eq = "";
        this.a4_eq = "";
        this.a5_eq = "";
        this.a6_eq = "";
        this.a7_eq = "";
        this.m_eq = "";
        this.a1_lt = "";
        this.a2_lt = "";
        this.a3_lt = "";
        this.a4_lt = "";
        this.a5_lt = "";
        this.a6_lt = "";
        this.a7_lt = "";
        this.m_lt = "";
        this.a1_gt = "";
        this.a2_gt = "";
        this.a3_gt = "";
        this.a4_gt = "";
        this.a5_gt = "";
        this.a6_gt = "";
        this.a7_gt = "";
        this.m_gt = "";
        this.filter = {};
        for (var i = 0; i < this.eqList.length; i++) {
           var item = this.eqList[i];
           item.id = i+1;
           item.model = null;
        }
        for (var i = 0; i < this.ltList.length; i++) {
           var item = this.ltList[i];
           item.id = i+1;
           item.model = null;
           item.model2 = null;
        }

      },

      // 创建等于列表
      addEQList(){
        for (var i = 0; i < 45; i++) {
          var item = new Object();
          item.id = i+1;
          item.model = null;
          this.eqList.push(item);
        }
      },

      // 创建小于等于列表
      addLtList(){
        for (var i = 0; i < 45; i++) {
          var item = new Object();
          item.id = i+1;
          item.model = null
          item.model2 = null;
          this.ltList.push(item);
        }
      },

      // 输入筛选
      change(index, value) {
        console.log(index, value)
      },

      // 主要筛选逻辑
      getFilter(){
        for (let i = 0; i < this.eqList.length; i++) {
          let res = this.eqList[i].model;
          if (res != null) {
             this.$set(this.filter, "m"+(i+1)+"_eq", res)
          }

        }

        for (let i = 0; i < this.ltList.length; i++) {
          let res = this.ltList[i].model;
          let res2 = this.ltList[i].model2;
          if (res != null) {
             this.$set(this.filter, "m"+(i+1)+"_gt", res)
          }
          if (res2 != null) {
             this.$set(this.filter, "m"+(i+1)+"_lt", res2)
          }
        }

      },


      // 返回上一页
      goBack() {
        this.$router.back();
      },

      // 筛选
      async goScreening() {

        this.getFilter();
        console.log("list == ", this.dataList)
        console.log("filter == ", this.filter)
        const res = await this.$http.post("/api/qixing/filterData", {
          list: JSON.stringify(this.dataList),
          filter: JSON.stringify(this.filter)
        })
        console.log(res);
        if (res.data.code == 200) {
          if (this.activeName == 'first') {
            window.localStorage.setItem("qixingfilterData", JSON.stringify(res.data.data));
          } else {
            window.localStorage.setItem("qixingfilterData2", JSON.stringify(res.data.data));
          }

          this.$router.push({
            path: '/home/rankSevenManual',
            query: {
              activeName: this.activeName
            }
          })
        } else {
          this.$message.error("请求失败");
        }
      },

      goNext() {
        console.log(this.filter)
      }
    },

    // 监听输入框编辑
    watch: {
      'a1_eq': function(newVal) {
        this.$set(this.filter, 'a1_eq', newVal)
      },
      'a2_eq': function(newVal) {
        this.$set(this.filter, 'a2_eq', newVal)
      },
      'a3_eq': function(newVal) {
        this.$set(this.filter, 'a3_eq', newVal)
      },
      'a4_eq': function(newVal) {
        this.$set(this.filter, 'a4_eq', newVal)
      },
      'a5_eq': function(newVal) {
        this.$set(this.filter, 'a5_eq', newVal)
      },
      'a6_eq': function(newVal) {
        this.$set(this.filter, 'a6_eq', newVal)
      },
      'a7_eq': function(newVal) {
        this.$set(this.filter, 'a7_eq', newVal)
      },
      'm_eq': function(newVal) {
        this.$set(this.filter, 'm_eq', newVal)
      },
      'a1_lt': function(newVal) {
        this.$set(this.filter, 'a1_lt', newVal)
      },
      'a2_lt': function(newVal) {
        this.$set(this.filter, 'a2_lt', newVal)
      },
      'a3_lt': function(newVal) {
        this.$set(this.filter, 'a3_lt', newVal)
      },
      'a4_lt': function(newVal) {
        this.$set(this.filter, 'a4_lt', newVal)
      },
      'a5_lt': function(newVal) {
        this.$set(this.filter, 'a5_lt', newVal)
      },
      'a6_lt': function(newVal) {
        this.$set(this.filter, 'a6_lt', newVal)
      },
      'a7_lt': function(newVal) {
        this.$set(this.filter, 'a7_lt', newVal)
      },
      'm_lt': function(newVal) {
        this.$set(this.filter, 'm_lt', newVal)
      },
      'a1_gt': function(newVal) {
        this.$set(this.filter, 'a1_gt', newVal)
      },
      'a2_gt': function(newVal) {
        this.$set(this.filter, 'a2_gt', newVal)
      },
      'a3_gt': function(newVal) {
        this.$set(this.filter, 'a3_gt', newVal)
      },
      'a4_gt': function(newVal) {
        this.$set(this.filter, 'a4_gt', newVal)
      },
      'a5_gt': function(newVal) {
        this.$set(this.filter, 'a5_gt', newVal)
      },
      'a6_gt': function(newVal) {
        this.$set(this.filter, 'a6_gt', newVal)
      },
      'a7_gt': function(newVal) {
        this.$set(this.filter, 'a7_gt', newVal)
      },
      'm_gt': function(newVal) {
        this.$set(this.filter, 'm_gt', newVal)
      },
    }

  }
</script>

<style scoped="scoped">
  .container {
    height: 100%;
  }

  .box {
    border: 1px solid #2676C2;
  }

  .el-header {
    background-color: #FFFFFF;
    color: #333;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid;
    border-color: #2676C2;
    border-width: 1px;
  }

  .el-aside {
    background-color: #FFFFFF;
    color: #2676C2;
    text-align: center;
    line-height: 590px;
    height: 590px;
    border-right-style: solid;
    border-color: #2676C2;
    border-width: 1px;
  }

  .el-main {
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    height: 550px;
    padding: 0;
    margin: 0;
    display: flex;
  }

  .left {
    width: 200px;
    height: 100%;
  }

  .right {
    width: 260px;
    height: 100%;
  }

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    color: #2676C2;
    border-right-style: solid;
    border-bottom: solid;
    border-color: #2676C2;
    border-width: 1px;
  }

  .input {
    width: 50px;
    height: 20px;
    border: 1px solid #999999;
    border-radius: 2px;
    background-color: #dddddd;
    text-align: center;

  }
</style>
